<template>
  <div class="">
    <div
      class="icon-folder w-full h-full flex bg-white flex-wrap content-between justify-between p-[8px] cursor-pointer"
      :data-type="data.type"
      :data-dropid="data.id"
      @click.prevent="openFolder()"
    >
      <div
        v-for="item in thumbIcons"
        :style="{ ...getBg(item).value }"
        class="flex items-center justify-center overflow-hidden bg-cover h-[24px] w-[24px] rounded-[8px]"
      ></div>
    </div>
    <div
      class="icon-title overflow text-white text-center w-[102px] max-w-[102px] h-[30px] leading-[20px] pt-[8px] relative left-[-14px]"
    >
      {{ data?.name }}
    </div>
    <Teleport to="#homeContainer">
      <Transition name="fade">
        <FolderShown
          :data="data"
          v-show="visibleFolder"
          :visible="visibleFolder"
          @close="closeFolder"
          @changeName="changeName"
        ></FolderShown>
      </Transition>
    </Teleport>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref, watchEffect } from "vue";
import FolderShown from "./FolderShown.vue";
import { watch } from "fs";
import { da } from "element-plus/es/locales.mjs";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

let data = ref(props.data);
watchEffect(() => {
  data.value = reactive(props.data);
});

const thumbIcons = computed(() => {
  const d = data.value;
  if (d.children.length > 4) {
    return d.children.slice(0, 4);
  }
  return d.children;
});

const getBg = (data) => {
  return computed(() => data?.bgType === "color"
      ? { backgroundColor: data?.bgColor }
      : { backgroundImage: `url(${data.bgImageUrl})` }
    
  );
};
const swapItems = (dragged, hoverId, splicePosition) => {
  const d = data.value;
  const draggedIndex = d.children.findIndex((item) => item.id === dragged.id);
  const [movedItem] = d.children.splice(draggedIndex, 1);
  let spliceIndex = d.children.findIndex((item) => item.id === hoverId);
  if (splicePosition === "right") {
    spliceIndex += 1;
  }
  d.children.splice(spliceIndex, 0, movedItem);
};
const emits = defineEmits(["changeName", "open"]);
const visibleFolder = ref(false);
const openFolder = () => {
  visibleFolder.value = true;
  emits("open", data.value.id);
};
const closeFolder = () => {
  visibleFolder.value = false;
};
const changeName = (name) => {
  // 改变文件夹名称
  data.value.name = name;
  emits("changeName", name);
};
defineExpose({
  openFolder,
  id: data.value.id,
  closeFolder,
  swapItems,
});
</script>
<style scoped lang="scss">
.icon-folder {
  filter: drop-shadow(rgba(0, 0, 0, 0.05) 0 4px 12px);
  font-size: 38px;
  height: var(--icon-size);
  transition: all 0.2s;
  width: var(--icon-size);
  border-radius: var(--icon-rounded, 20px);
}
.icon-folder:hover {
  transform: translateY(-4px);
  transition: all 0.3s;
}
.icon-title {
  font-size: var(--icon-font-size, 14px);
  user-select: none;
  -webkit-user-drag: none;
}
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
  transition: all 0.3s;
}
</style>
